<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 头部 -->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <!-- 左侧关键字 -->
          <el-form-item label="关键字">
            <el-input
              v-model="formInline.user"
              placeholder="根据编号进行搜索"
            ></el-input>
          </el-form-item>

          <!-- 右侧清除/搜索 -->
          <el-form-item class="right">
            <el-button @click="clear">清除</el-button>
            <el-button type="primary" @click="search">搜索</el-button>
          </el-form-item>
        </el-form>

        <!-- 条数提示 -->
        <el-row class="numberOfStrips">
          <el-alert :title="`数据一共${total}条`" type="info" show-icon>
          </el-alert>
        </el-row>

        <!-- 列表信息 -->
        <el-table :data="list" >
          <el-table-column width="250" prop="id" label="编号" />

          <el-table-column prop="questionType" label="题型" width="150">
            <template slot-scope="scope">
              <p v-if="scope.row.questionType === '1'">单选</p>
              <p v-else-if="scope.row.questionType === '2'">多选</p>
              <p v-else>简答</p>
            </template>
          </el-table-column>

          <el-table-column prop="questionIDs" label="题目编号" width="280">
            <template slot-scope="scope">
              <div v-for="(item, index) in scope.row.questionIDs" :key="index">
                <p class="number" @click="preview(item.id)">
                  {{ item.number }}
                </p>
              </div>
            </template>
          </el-table-column>

          <el-table-column width="200" prop="addTime" label="录入时间" />

          <el-table-column
            width="170px"
            prop="totalSeconds"
            label="答题时间(s)"
          />

          <el-table-column
            width="150px"
            prop="accuracyRate"
            label="正确率($)"
          />

          <el-table-column  prop="userName" label="录入人" />

          <el-table-column  prop="label" label="操作">
            <!-- 列表删除按钮 -->
            <template slot-scope="scope">
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                plain
                @click.native="hDel(scope.row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页区域 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="query.page"
          :page-sizes="[20, 30, 50, 100]"
          :page-size="query.pagesize"
          layout=" prev, pager, next,  sizes, jumper"
          :total="total"
          background
        >
        </el-pagination>
      </el-card>

      <!-- 预览区域 -->
      <questions-preview
        :dialogVisible="dialogVisible"
        @close="dialogVisible = false"
        :questionItem="questionItem"
      ></questions-preview>
    </div>
  </div>
</template>
<script>
import questionsPreview from '../components/questions-preview'
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions'

export default {
  name: 'QuestionRandom',
  data () {
    return {
      questionItem: {},
      formInline: {
        user: '',
        region: ''
      },
      searchForm: {
        keyword: '' // 关键字
      },
      query: {
        page: 1, // 页码
        pagesize: 20, // 每页条数
        keyword: '' // 关键字
      },
      dialogVisible: false, // 预览
      list: [], // 员工列表
      total: 0 // 数据总条数
    }
  },

  created () {
    // 调用获取列表的方法
    this.List()
  },
  components: {
    questionsPreview // 预览
  },

  methods: {
    // 预览权限
    async preview (id) {
      try {
        const { data } = await detail({ id })
        this.questionItem = data
        this.dialogVisible = true
      } catch (error) {
        this.$message.info('数据未找到')
        return error
      }
    },

    // 删除权限
    async hDel (row) {
      // 确认消息
      const confirmRes = await this.$confirm(
        '此操作将永久删除该权限, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)

      if (confirmRes === 'cancel') return this.$message.info('您取消了删除')

      // 调用接口，并传入 ID
      await removeRandoms({ id: row.id })
      if (this.list.length === 1) {
        this.query.page--
        if (this.query.page <= 1) {
          this.query.page = 1
        }
      }

      this.$message.success('删除成功')

      this.List()
    },

    // 搜索权限()
    async  search () {
      this.query.keyword = this.formInline.user
      const res = await randoms({ keyword: this.query.keyword })
      this.list = res.data.items
      // this.query.page = res.data.page
      // this.query.pagesize = res.data.page
      this.total = res.data.counts
    },

    // 清除权限
    clear () {
      this.query = {
        page: 1, // 页码
        pagesize: 20, // 每页条数
        keyword: '' // 关键字
      }
      this.formInline.user = ''
      this.List()
    },

    // 获取列表
    async List () {
      this.query.keyword = this.formInline.user
      const res = await randoms(this.query)
      this.list = res.data.items
      // this.query.page = res.data.page
      // this.query.pagesize = res.data.page
      this.total = res.data.counts
    },

    // 每页条数发生改变触发
    handleSizeChange (pagesize) {
      this.query.pagesize = pagesize
      this.List()
    },

    // 页码发生改变触发
    handleCurrentChange (page) {
      this.query.page = page
      this.List()
    }
  }
}
</script>
<style scoped>
.number {
  color: #09f;
  cursor: pointer;
  line-height: 10px;
}
.el-pagination {
  margin-top: 50px;
}
.el-table-column {
  width: 200px;
}
.right {
  float: right;
}
.el-row {
  margin-bottom: 20px;
}
.numberOfStrips {
  background: 144, 147, 153;
}
.bg-purple-dark {
  background: #99a9bf;
}
.el-pagination {
  float: right;
}
::v-deep.el-table th {
  background-color: #fafafa;
}
::v-deep.el-table th.is-leaf {
  border-bottom: 2px solid #e8e8e8
}
</style>
